{% extends "./master.tpl" %}
{% block body %}
<div class="row">
	<div class="eight columns panel" id="main-panel">
		<h2>Joueur {{number+1}} <span id="game-status"></span></h2>
		<table id="matrice" style="background-image:url('/static/img/backgrounds/{{random}}.jpg');">
			<caption><h3>Partie - {{gamename}}</h3></caption>
			<tbody>
				{% for _line in matrice %}
				<tr>
					{% set i = loop.index0 %}
					{% for _cell in _line %}
					<td id="{{i}}A{{loop.index0}}" class="cell">
						{% set imgclass = "nothing" %}
						{% if _cell != "null" %}
						{% set imgclass = "letter" %}
						{% endif %}
						<img class="{{imgclass}}" src="/static/img/letters/{{_cell}}.png" alt="letter"/>
					</td>
					{% endfor %}
				</tr>
				{% endfor %}
			</tbody>
		</table>
	</div>
	<div class="four columns" style="padding-left:15px; padding-right:0px">
		<div class="panel">
			<form action="" id="jouer-form">
				<fieldset>
					<div class="row collapse">
						<div class="three columns">
					    	<span class="prefix"><label for="input_playedword">Mot</label></span>
					    </div>
					    <div class="nine columns">
					        <input name="playedword" id="input_playedword" placeholder="Mot à jouer ?" required="" type="text"/>
					    </div>
					    <div id="wrong-word" style="color:red; margin-bottom:10px;"></div>
					</div>
					<a class="radius button" id="btn_passer" href="#"style="float:right;">Passer</a>
					<a class="radius button" id="btn_jouer" href="#"style="float:left;">Jouer</a>
				</fieldset>
			</form>
			<form>
			</form>
			<h2>Scores</h2>
			<div id="list-scores">
				{% for _score in scores %}
				<p style="font-size:20px;"><strong>Joueur {{loop.index}}</strong> : <span id="score_{{loop.index}}">{{_score}}</span> points</p>
				{% endfor %}
			</div>
			<img src="/static/img/python.png" alt="un python de nowel" style="width:100%; padding:15px;"/>
			<div id="list-mots" style="max-height: 100px; overflow: auto;">
				{% for _mot in mots %}
				<p style="font-size:12px;"><strong>{{_mot}}</strong></p>
				{% endfor %}
			</div>
			<a class="button radius" style="margin-top:10px;" href="/room">Salle de jeux</a>
		</div>
	</div>
</div>
{% endblock %}
{% block script %}
<script src='/_ah/channel/jsapi'></script>
<script>
var state = {
	game_key : '{{ game_key }}',
	id : '{{ me }}',
	playerNbr : '{{ number }}',
	currentPlayer : '{{ currentPlayer }}',
	nbPlayers : '{{ nbPlayers }}',
	channel : '{{ channelId }}',
	ready : '{{ ready }}'
};
var token = '{{token}}';
</script>
<script src="/static/js/game.js"></script>
{% endblock %}
